<template>
	<view class="container">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">维保工单详情</block>
		</cu-custom>

	<view class="bg-top bg-blue">
		<view v-if="false" class="top-box shadow">
			<view class="cu-list menu" style="padding-bottom: 20rpx;">
				 <!-- 1待分配 2 待处理  3已经处理 4 完结 -->
				<u-steps :list="numList" :current="dataDetail.Status-1" mode="number"></u-steps>
			</view>
		</view>
		<view style="margin-top: 10rpx;" v-if="dataDetail.CommentRate>0">
			<view class="top-box shadow">
				<view class="cu-list menu">
					<view class="cu-item" style="padding: 0;">
						<view class="cu-item-title">
							<text class="cu-item-title-text">评论信息</text>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content" style="display: flex; justify-content: space-around;">
							<text class="cuIcon-timefill text-blue  margin-right-xs"></text>
							<text class="text-black text-bold"
								style="min-width: 200rpx; max-width: 200rpx; text-align: left;">打分:</text>
							<text class="text-black"
								style="min-width: 380rpx; max-width: 380rpx; text-align: left;">{{dataDetail.CommentRate}}分</text>
						</view>
					</view>
				
					<view class="cu-item" style="padding: 0;">
						<view class="content" style="display: flex; justify-content: space-around;">
							<text class="bxImg cuIcon-formfill text-blue"></text>
							<text class="text-black text-bold"
								style="min-width: 200rpx; max-width: 200rpx; text-align: left;">评论内容:</text>
							<text class="text-black"
								style="min-width: 380rpx; max-width: 380rpx; text-align: left;">{{dataDetail.CommentContent}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view :style="dataDetail.Status<=2?'margin-top: 20rpx;padding-bottom: 400rpx;':'margin-top: 20rpx;'" class="top-box shadow">
			<view class="cu-list menu">
				<view class="cu-item" style="padding: 0;">
					<view class="cu-item-title">
						<text class="cu-item-title-text">工单信息</text>
					</view>
				</view>
				
				<view class="cu-item" style="padding: 0;">
					<view class="content" style="display: flex; justify-content: space-around;">
						<text class="bxImg cuIcon-friendaddfill text-blue"></text>
						<text class="text-black text-bold"
							style="min-width: 200rpx; max-width: 200rpx; text-align: left;">状态:</text>
						<text :class="checkStatusClass" class="cu-tag margin-right-xs light radius"
								style="min-width: 380rpx; max-width: 380rpx; text-align: left;">
								{{checkStatusTitle}}
						</text>
					</view>
				</view>
				
				<view class="cu-item" style="padding: 0;">
					<view class="content" style="display: flex; justify-content: space-around;">
						<text class="bxImg cuIcon-friendaddfill text-blue"></text>
						<text class="text-black text-bold"
							style="min-width: 200rpx; max-width: 200rpx; text-align: left;">报修设备:</text>
						<text class="text-black"
							style="min-width: 380rpx; max-width: 380rpx; text-align: left;">{{dataDetail.QrcodeName}}</text>
					</view>
				</view>
				<view class="cu-item" style="padding: 0;">
					<view class="content" style="display: flex; justify-content: space-around;">
						<text class="bxImg cuIcon-friendaddfill text-blue"></text>
						<text class="text-black text-bold"
							style="min-width: 200rpx; max-width: 200rpx; text-align: left;">上报人员:</text>
						<text class="text-black"
							style="min-width: 380rpx; max-width: 380rpx; text-align: left;">{{dataDetail.AddUserName}}</text>
					</view>
				</view>
				
				
				
				<view class="cu-item" style="padding: 0;">
					<view class="content" style="display: flex; justify-content: space-around;">
						<text class="cuIcon-timefill text-blue  margin-right-xs"></text>
						<text class="text-black text-bold"
							style="min-width: 200rpx; max-width: 200rpx; text-align: left;">上报时间:</text>
						<text class="text-black"
							style="min-width: 380rpx; max-width: 380rpx; text-align: left;">{{dataDetail.AddTime}}</text>
					</view>
				</view>
				
				<view class="cu-item" style="padding: 0;">
					<view class="content" style="display: flex; justify-content: space-around;">
						<text class="bxImg cuIcon-formfill text-blue"></text>
						<text class="text-black text-bold"
							style="min-width: 200rpx; max-width: 200rpx; text-align: left;">现场备注:</text>
						<text class="text-black"
							style="min-width: 380rpx; max-width: 380rpx; text-align: left;">{{dataDetail.Desc}}</text>
					</view>
				</view>

			</view>
			<view  v-if="dataDetail.ImagesArry.length > 0" class="cu-list menu" style="margin-top: 10rpx;">
				<view class="cu-bar bg-white margin-top-xs u-border-bottom">
					<view class="action sub-title">
						<text class="text-xl text-bold text-blue text-shadow">现场图片</text>
						<text class="text-ABC text-blue">Pictures</text>
					</view>
				</view>
				<view v-if="dataDetail.ImagesArry.length < 0" class="padding text-grey">暂无数据</view>
				<view v-if="dataDetail.ImagesArry.length > 0">
					 <view v-for="(item,index) in dataDetail.ImagesArry">
						 <view class="cu-item imagesclass" style="padding: 0;">
							<view class="content">
								<image @click="goPreviewImage(dataDetail.ImagesArry,dataDetail.baseUrl)"  :src="dataDetail.baseUrl+dataDetail.ImagesArry[index]" class="png cu-avatar sm imagesclassdetail" mode="aspectFit"></image>
							</view>
						 </view>
					 </view>
				</view>
			</view>
			<view v-if="dataDetail.Voice !=null &&dataDetail.Voice !=''" class="cu-list menu" style="margin-top: 10rpx;">
				<view class="cu-bar bg-white margin-top-xs u-border-bottom">
					<view class="action sub-title">
						<text class="text-xl text-bold text-blue text-shadow">现场视频</text>
						<text class="text-ABC text-blue">Video</text>
					</view>
				</view>
				<view  class="cu-item" style="padding: 0;">
					<view class="content">
						<view v-if="dataDetail.Voice ==null ||dataDetail.Voice ==''" class="padding text-center text-grey">暂无数据</view>
						<video  v-if="dataDetail.Voice !=null && dataDetail.Voice !=''" :src="dataDetail.baseUrl+dataDetail.Voice" style="width: 100%;"  playerid="txv1"></video>
					</view>
				</view>
			
			</view>

		</view>

			
		<view style="margin-top: 20rpx;padding-bottom: 400rpx;" v-if="dataDetail.Status>2">
			<view class="top-box shadow">
				<view class="cu-list menu">
					<view class="cu-item" style="padding: 0;">
						<view class="content" style="display: flex; justify-content: space-around;">
							<text class="bxImg cuIcon-friendaddfill text-blue"></text>
							<text class="text-black text-bold"
								style="min-width: 200rpx; max-width: 200rpx; text-align: left;">处理状态:</text>
							<text :class="dataDetail.isok==1?'bg-blue':'bg-red'" class="cu-tag margin-right-xs light radius"
								style="min-width: 380rpx; max-width: 380rpx; text-align: left;">
								{{dataDetail.isok==1?'已解决':'未解决'}}
								</text>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content" style="display: flex; justify-content: space-around;">
							<text class="bxImg cuIcon-friendaddfill text-blue"></text>
							<text class="text-black text-bold"
								style="min-width: 200rpx; max-width: 200rpx; text-align: left;">处理人员:</text>
							<text class="text-black"
								style="min-width: 380rpx; max-width: 380rpx; text-align: left;">{{dataDetail.ProcessUserName}}</text>
						</view>
					</view>
					
					<view class="cu-item" style="padding: 0;">
						<view class="content" style="display: flex; justify-content: space-around;">
							<text class="cuIcon-timefill text-blue  margin-right-xs"></text>
							<text class="text-black text-bold"
								style="min-width: 200rpx; max-width: 200rpx; text-align: left;">处理时间:</text>
							<text class="text-black"
								style="min-width: 380rpx; max-width: 380rpx; text-align: left;">{{dataDetail.UpdateTime}}</text>
						</view>
					</view>
					
					<view class="cu-item" style="padding: 0;">
						<view class="content" style="display: flex; justify-content: space-around;">
							<text class="bxImg cuIcon-formfill text-blue"></text>
							<text class="text-black text-bold"
								style="min-width: 200rpx; max-width: 200rpx; text-align: left;">现场备注:</text>
							<text class="text-black"
								style="min-width: 380rpx; max-width: 380rpx; text-align: left;">{{dataDetail.ProcessDesc}}</text>
						</view>
					</view>
					
					
					<view class="cu-item" style="padding: 0;">
						<view class="content" style="display: flex; justify-content: space-around;">
							<text class="bxImg cuIcon-formfill text-blue"></text>
							<text class="text-black text-bold"
								style="min-width: 200rpx; max-width: 200rpx; text-align: left;">使用备件:</text>
							<text class="text-black"
								style="min-width: 380rpx; max-width: 380rpx; text-align: left;">{{dataDetail.SceneSpareTitle}}</text>
						</view>
					</view>
			
				</view>
				
				
				<view  v-if="dataDetail.ProcessImagesArry.length > 0" class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">现场图片</text>
							<text class="text-ABC text-blue">Pictures</text>
						</view>
					</view>
					<view v-if="dataDetail.ProcessImagesArry.length < 0" class="padding text-grey">暂无数据</view>
					<view v-if="dataDetail.ProcessImagesArry.length > 0">
						 <view v-for="(item,index) in dataDetail.ProcessImagesArry">
							 <view class="cu-item imagesclass" style="padding: 0;">
								<view class="content">
									<image @click="goPreviewImage(dataDetail.ProcessImagesArry,dataDetail.baseUrl)"  :src="dataDetail.baseUrl+dataDetail.ProcessImagesArry[index]" class="png cu-avatar sm imagesclassdetail" mode="aspectFit"></image>
								</view>
							 </view>
						 </view>
					</view>
				</view>
				<view  v-if="dataDetail.ProcessVoice !=null &&dataDetail.ProcessVoice !=''"  class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">现场视频</text>
							<text class="text-ABC text-blue">Video</text>
						</view>
					</view>
					<view  class="cu-item" style="padding: 0;">
						<view class="content">
							<view v-if="dataDetail.ProcessVoice ==null ||dataDetail.ProcessVoice ==''" class="padding text-center text-grey">暂无数据</view>
							<video  v-if="dataDetail.ProcessVoice !=null && dataDetail.ProcessVoice !=''" :src="dataDetail.baseUrl+dataDetail.ProcessVoice" style="width: 100%;"  playerid="txv1"></video>
						</view>
					</view>
				</view>
			</view>
		</view>
			

		<view style="height: 150rpx; width: 1rpx;"></view>
		
		<view class="cu-bar bg-white tabbar border shop solid-top" style="height:150rpx;position: fixed; bottom: 0;width: 100%; z-index: 9999;">
			<button class="action">
				<view class="cuIcon-share text-green">
				</view> 按钮2
			</button>
			<button class="action">
				<view class="cuIcon-share text-green">
				</view> 按钮3
			</button>
			<view class="btn-group">
				<button open-type="contact" style="width: 80%;height:80rpx" class="cu-btn bg-gradual-blue round shadow-blur">按钮1</button>
			</view>
		</view>

		<multiple-select
			  v-model="show"
			  :data="list"
			  :default-selected="defaultSelected"
			  @confirm="confirm"
		></multiple-select>
		<view v-if="false" class="publish-goods-wrap">
			<view  v-if="IsAdmin==1&&desc=='goend'" class="publish-goods-btn3" @click="end()">结   案</view>
			<view v-if="(desc=='assign'||desc=='handle')&&IsAdmin==1"  class="publish-goods-btn2" @click="assign()">指   派</view>
			<view  v-if="desc!='end'" class="publish-goods-btn1" @click="goHandle()">处   理</view>
			<view  v-if="desc=='end'&&isCommon" class="publish-goods-btn1" @click="goComment(dataDetail.Id)">评   价</view>
		</view>
		
		<!-- 处理按钮 -->
		<!-- <view v-if="desc=='end'&&IsAdmin==1" class="padding-lr flex margin-top-sm" style="justify-content: space-between;margin-bottom: 10rpx;">
			<button @click="end()" class="cu-btn bg-red margin-top-sm lg" style="width: 100%;">结   案</button>
		</view>
		<view v-if="(desc=='assign'||'handle')&&IsAdmin==1" class="padding-lr flex margin-top-sm" style="justify-content: space-between;margin-bottom: 10rpx;">
			<button @click="assign()" class="cu-btn bg-green margin-top-sm lg" style="width: 100%;">指   派</button>
		</view>
		<view class="padding-lr flex margin-top-sm" style="justify-content: space-between;margin-bottom: 50rpx;">
			<button @click="goHandle()" class="cu-btn bg-blue margin-top-sm lg" style="width: 100%;">处   理</button>
		</view> -->
		</view>
	</view>
</template>

<script>
import request from '@/common/request.js';
	export default {
		components: {
		},
		data() {
			return {
				goodsNav: 1,
				IsAdmin:0,
				show: false, //是否显示
				info: "",
				list: [
				], //数据源
				defaultSelected: [], //默认选中项
				desc:'',
				id:0,
				params:{},
				dataDetail:{
					Id:0,
					QrcodeId:'',
					QrcodeName:'',
					AddUser:'',
					AddUserName:'',
					AddTime:'',
					Desc:'',
					Images:'',
					ImagesArry:[],
					Voice:'',
					baseUrl:'',
					ProcessUserName:'',
					UpdateTime:'',
					ProcessDesc:'',
					ProcessImages:'',
					ProcessImagesArry:[],
					ProcessVoice:'',
					SceneSpare:'',
					SceneSpareTitle:'',
					CommentRate:0,
					CommentContent:''
				},
				isCommon:false,
				numList: [{
					name: '工单上报'
				}, {
					name: '人员指派'
				}, {
					name: '工单处理'
				}, {
					name: '结案'
				}, ],
				checkStatusClass:'',
				checkStatusTitle:''
			}
		},
		onShow() {
			
		},
		onLoad(option) {
			this.id=option.id
			this.desc=option.desc
			this.IsAdmin=option.IsAdmin
			this.getQrcodeSceneDetail(option.id)
			
			console.log(option.desc)
		},
		onReachBottom() {

		},
		onShareAppMessage() {
			return {
				title: '分享'
			}
		},
		methods: {
			setNav(goodsNav) {
				this.goodsNav = goodsNav
				console.log("tap set nav " + goodsNav);
			},
			goComment(id){
				console.log(id)
				uni.navigateTo({
					url: '/pages/qrcode/scene/comment?id='+id
				})
			},
			//指派工单
			assign(){
				let that=this
				that.show=true
				uni.showLoading({
					title: '加载中'
				})
				//加载人员数据
				let opts = {
					url: 'api/GetQrcodeUserList',
					method: 'get'
				};
				request.httpTokenRequest(opts).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						that.list=res.data.data;
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			// 确定事件
			confirm(data) {
				if(data.length==0){
					uni.showToast({ title: "请选择人员" ,icon: 'none' });
					return
				}
				let that=this
				//console.log(data);
				let users= data.map((el) => el.value).join(",");
				uni.showLoading({
					title: '提交中'
				})
				//加载人员数据
				let opts = {
					url: 'api/QrcodeSceneAssign',
					method: 'get'
				};
				
				that.params.sceneid=that.id
				that.params.sceneuser=users
				request.httpTokenRequest(opts,that.params).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						uni.showToast({ title: '更新成功', icon: '/static/success.png' });
						setTimeout(() => {
							 uni.reLaunch({
								url: '/pages/index/tabbar?PageCur=index'
							 });
						}, 1000)
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			goPreviewImage(url,baseurl){
				let urls=[]
				for(let i=0;i<url.length;i++){
					urls.push(baseurl+url[i])
				}
				uni.previewImage({
					current:0,
					urls:urls
				});
			},
			getQrcodeSceneDetail(id) {
				uni.showLoading({
					title: '加载中'
				})
				var that = this;
				let opts = {
					url: 'api/GetQrcodeSceneDetail',
					method: 'get'
				};
				that.params.id=id;
				request.httpTokenRequest(opts,that.params).then(res => {
					//console.log(res);
					uni.hideLoading();
					if(res.data.code == 1){
						that.dataDetail=res.data.data;
						that.dataDetail.baseUrl=this.$request22.baseUrl1
						
						uni.getStorage({
							key: 'userdata',
							success: function (userdateRes) {
								if(userdateRes.data.Id==res.data.data.AddUser&&res.data.data.CommentRate==0){
									that.isCommon=true
								}
							}
						});
						
						
						//判断
						//1待指派 2 待处理  3待结案 4 已完结
						//console.log(that.dataDetail.Status)
						if(that.dataDetail.Status==1){
							that.checkStatusClass='bg-blue'
							that.checkStatusTitle='待指派'
						}else if(that.dataDetail.Status==2){
							that.checkStatusClass='bg-orange'
							that.checkStatusTitle='待处理'
						}else if(that.dataDetail.Status==3){
							that.checkStatusClass='bg-red'
							that.checkStatusTitle='待结案'
						}else{
							that.checkStatusClass='bg-green'
							that.checkStatusTitle='已完结'
						}
						
						uni.hideLoading();
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			goHandle(){
				uni.navigateTo({
					url: '/pages/qrcode/scene/handle?id='+this.id
				})
			},
			end(){
				//this.id  
				var that = this;
				let opts = {
					url: 'api/EndScene',
					method: 'get'
				};
				that.params.id=this.id;
				request.httpTokenRequest(opts,that.params).then(res => {
					//console.log(res);
					uni.hideLoading();
					if(res.data.code == 1){
						uni.showToast({ title: '更新成功', icon: '/static/success.png' });
						setTimeout(() => {
							 uni.reLaunch({
								url: '/pages/index/tabbar?PageCur=index'
							 });
						}, 1000)
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.cu-list.menu>.cu-item{
		min-height: 80rpx;
	}
	.uni-video{
		width: 100% !important;
	}
	.container {
		width: 750rpx;
		color: #333333;
		.imagesclass{
			width:33%;
			float:left;
			.imagesclassdetail{
				width: 100px !important;
				height: 100px !important;
				margin-right: 20px;
			}
		}
		.bg-top {
			margin-top: -1rpx;
			width: 750rpx;
			height: 220rpx;
			padding-top: 10rpx;
			border-radius: 0 0 20% 20%;

			.top-box {
				width: 700rpx;
				background-color: #FFFFFF;
				margin: 0 auto;
				border-radius: 20rpx;
				padding: 20rpx 30rpx 0rpx;
				position: relative;

				.qh-pic {
					position: absolute;
					right: 64rpx;
					top: -50rpx;
					border-radius: 12rpx;
				}

				.qh-title {
					width: 100%;
					height: 60rpx;
					line-height: 65rpx;
					padding-right: 190rpx;
				}

				.bxBox {
					position: relative;
					display: flex;
					/* padding: 0 30rpx; */
					min-height: 100rpx;
					/* background-color: #ffffff; */
					/* justify-content: space-between; */
					align-items: center;
					font-size: 30rpx;
					line-height: 1.6em;
					flex: 1;

					.bxImg {
						display: inline-block;
						margin-right: 10rpx;
						width: 1.6em;
						text-align: center;
					}
				}

			}
		}

		.center-box {
			color: #333333;
			width: 700rpx;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 20rpx;
			padding: 0rpx 30rpx 0rpx;
			position: relative;
			margin-top: 20rpx;
		}
	}
	
	.publish-goods-wrap {
		background: rgba(255, 255, 255, .5);
		padding: 24rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	.publish-goods-btn1 {
		margin: 24rpx;
		background: #39b54a;
		color: #FFFFFF;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
	}
	.publish-goods-btn2 {
		margin: 24rpx;
		background: #0079FE;
		color: #FFFFFF;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
	}
	.publish-goods-btn3 {
		margin: 24rpx;
		background: #e54d42;
		color: #FFFFFF;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
	}
	
	.goods-empty-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40%;
	}
	
	.goods-header-wrap {
		font-size: 26rpx;
		display: flex;
		align-items: center;
		padding: 12rpx;
		background: #FFFFFF;
	}
	
	
	.cu-item-title-text{
		color: #333;font-weight: 700;font-size: 32rpx;border-left: 4px solid #0081ff;padding-left: 20rpx;
	}
</style>